<template>
	<view>
		<view class="list">
			<view class="list-one" v-for="(item, list) in feedbacklist" :key="list">
				<view class="twen">
					<view class="tit">反馈意见：{{ item.info }}</view>
					<view class="bottm">{{ item.createTime }}</view>
				</view>
				<view class="deal" v-if="item.dealTime">
					<view class="tit">处理意见：{{ item.dealInfo }}</view>
					<view class="bottm">{{ item.dealTime }}</view>
				</view>
			</view>
		</view>
		<u-empty :show="feedbacklist.length == 0 && loading ? true : false" marginTop="100"></u-empty>
		<u-loadmore :status="loadstatus" line v-if="feedbacklist.length > 0" />
		<view style="height: 140rpx"></view>
		<view class="btn" @click="show = true">我要反馈</view>
		<u-popup :show="show" @close="close" closeable>
			<view class="popup-cont">
				<view class="tit">详细问题</view>
				<view class="text">
					<u--textarea v-model="value1" placeholder="请输入内容" count></u--textarea>
				</view>
				<view class="btns" @click="click_idea">提交反馈</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { feedbackpage, feedbackcreate } from '@/api/mine.js';
export default {
	data() {
		return {
			feedbacklist: [],
			queryParams: {
				pageNo: 1,
				pageSize: 10
			},
			show: false,
			value1: '',
			loading: false,
			loadstatus: 'loading'
		};
	},
	onLoad() {
		this.get_feedback();
	},
	methods: {
		click_idea() {
			if (!this.value1) {
				uni.$u.toast('请填写内容');
				return;
			}
			feedbackcreate({ info: this.value1 }).then((res) => {
				if (res.code == '0') {
					uni.$u.toast('反馈成功');
					this.queryParams.pageNo = 1;
					this.feedbacklist = [];
					this.get_feedback();
					this.close();
				} else {
					uni.$u.toast(res.msg);
				}
			});
		},
		close() {
			this.show = false;
			this.value1 = '';
		},
		get_feedback() {
			feedbackpage(this.queryParams).then((res) => {
				this.loading = true;
				if (res.data.list.length == 0 && this.queryParams.pageNo > 1) {
					this.loadstatus = 'nomore';
					return;
				}
				if (this.queryParams.pageNo == 1 && res.data.list.length < 10) {
					this.loadstatus = 'nomore';
				}
				this.feedbacklist = this.feedbacklist.concat(res.data.list);
				this.queryParams.pageNo = res.data.list.length == 0 ? this.queryParams.pageNo : (this.queryParams.pageNo += 1);
			});
		}
	},
	onPullDownRefresh() {
		this.queryParams.pageNo = 1;
		this.feedbacklist = [];
		this.get_feedback();
	},
	onReachBottom() {
		this.get_feedback();
		this.loadstatus = 'loading';
	}
};
</script>

<style lang="scss">
.list {
	padding: 0 24rpx;
	.list-one {
		background-color: #fff;
		padding: 24rpx;
		border-bottom: 2rpx solid #9898982b;
		margin-top: 24rpx;
		border-radius: 12rpx;
		.tit {
			font-size: 28rpx;
		}
		.twen,
		.deal {
			padding: 24rpx 0;
			.tit {
				font-size: 28rpx;
			}
			.bottm {
				font-size: 26rpx;
				height: 40rpx;
				line-height: 40rpx;
				width: 100%;
				text-align: right;
			}
		}
		.twen {
			border-bottom: 2rpx dashed #9898982b;
		}
	}
}
.btn {
	position: fixed;
	bottom: 40rpx;
	left: 10%;
	width: 80%;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background-color: #8bb950;
	border-radius: 40rpx;
	color: #fff;
}
.popup-cont {
	padding: 48rpx;
	.tit {
		text-align: left;
		font-size: 32rpx;
		line-height: 44rpx;
		font-weight: bold;
		margin-top: 32rpx;
		margin-bottom: 24rpx;
	}
	.text {
		margin: 0;
		border: 2rpx solid #d8d8d8;
		border-radius: 12rpx;
	}
	.btns {
		margin: 64rpx;
		height: 88rpx;
		background: #8bb950;
		border-radius: 20rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
	}
}
</style>